<!-- 可见状态 -->
<template>
    <view class="visible-state" @click="visibleStateFn()"><text>{{ visibleText }}</text><img src="@/assets/image/icon29.png" alt=""></view>
    <van-popup
        v-model:show="showBottom"
        @click-overlay="showBottom = !showBottom"
        round
        position="bottom"
        >
        <view class="visible-state-list">
            <view class="visible-state-list-item" v-for="item in visibleStateList" :key="item.id" @click="visibleStateCheckFn(item)">{{item.name  }}</view>
        </view>
    </van-popup>
</template>

<script setup>
import { toRefs } from "vue";
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
const state = reactive({
    visibleText:"公开可见",
    showBottom:false,
    visibleStateList:[
        {
            id:1,
            name:"公开可见"
        },
        {
            id:2,
            name:"仅个人可见"
        },
        {
            id:3,
            name:"取消"
        }
    ]
})

let { visibleText,showBottom,visibleStateList } = toRefs(state)
const visibleStateFn = () => {
    state.showBottom = !state.showBottom
}

const visibleStateCheckFn = (item) => {
    if(item.id != 3){
        state.visibleText = item.name
    }
    state.showBottom = false
}

</script>

<style lang="scss" scoped>
.visible-state{
    display: flex;
    align-items: center;
    height: 62rpx;
    text{
        display: block;
        line-height: 62rpx;
        margin-right: 10rpx;
    }
    img{
        height: 24rpx;
    }
}
.visible-state-list-item{
    text-align: center;
    line-height: 60rpx;
    padding:20rpx 0;
}
.visible-state-list-item:nth-child(1){
    border-bottom: 1px solid #eee;
}
.visible-state-list-item:nth-child(3){
    border-top: 10rpx solid #ececec;
}

</style>
